<template>
  <div class="basic-info">
    <div class="basic-body common-content">
      <el-scrollbar style="height: 100%;">
        <div class="scrollbar-box">
          <div class="comp-item-group">
            <div class="comp-item-box">
              <div class="comp-item-title">填写应用信息</div>
              <div class="comp-item-cont">
                <el-form
                    :model="basicForm"
                    :rules="basicRules"
                    ref="basicForm"
                    size="small"
                    label-width="100px"
                    class="demo-ruleForm2">
                  <el-row :gutter="15">
                    <el-col :span="8">
                      <el-form-item label="应用名称" prop="appName">
                        <el-input v-model="basicForm.appName" placeholder="请输入应用名称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="应用版本号" prop="appVersion">
                        <el-input v-model="basicForm.appVersion" placeholder="请输入应用版本号"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="应用类型" prop="appType">
                        <el-select
                            class="w100"
                            v-model="basicForm.appType"
                            placeholder="选择应用类型">
                          <el-option label="单组件应用" :value="1"></el-option>
                          <el-option label="组合应用" :value="2"></el-option>
                          <el-option label="单执行应用" :value="3"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="basicForm.appType===1">
                      <el-form-item label="应用组件" prop="appVersion">
                        <el-input
                            v-model="basicForm.pluginsName"
                            placeholder="请选择应用组件"
                            readonly
                            @click.native="showPluginsDailog"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="数据入库" prop="appIndb">
                        <el-select
                            class="w100"
                            v-model="basicForm.appIndb"
                            placeholder="数据是否入库">
                          <el-option label="入库" value="0"></el-option>
                          <el-option label="不入库" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="basicForm.appIndb==='0'">
                      <el-form-item label="数据库名称" prop="appVersion">
                        <el-input v-model="basicForm.appDBName" placeholder="请输入数据库名称"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="所属资源" prop="resourceId">
                        <el-select
                            class="w100"
                            v-model="basicForm.resourceId"
                            placeholder="选择所属资源">
                          <el-option
                              v-for="(item, index) in resourceOptions"
                              :key="index"
                              :label="item.resName"
                              :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否监听" prop="isMonitor">
                        <el-select
                            class="w100"
                            v-model="basicForm.isMonitor"
                            placeholder="数据是否监听">
                          <el-option label="监听" value="0"></el-option>
                          <el-option label="不监听" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否切换" prop="isSwitch">
                        <el-select
                            class="w100"
                            v-model="basicForm.isSwitch"
                            placeholder="数据是否切换">
                          <el-option label="切换" value="0"></el-option>
                          <el-option label="不切换" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="版本说明" prop="appRemarks">
                        <el-input
                            type="input"
                            v-model="basicForm.appRemarks" placeholder="请输入版本说明"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="场景描述" prop="appScene">
                        <el-input
                            type="textarea"
                            v-model="basicForm.appScene" placeholder="请输入场景描述"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>

              <div class="comp-item-btn-group">
                <!--<el-button type="warning">重置数据</el-button>-->
                <el-button type="primary" @click="appAdd">添加应用</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <PluginsDailog ref="pluginsDailog" @checked="checkedPlugin"></PluginsDailog>
  </div>
</template>

<script>
import {get_getResource, put_AApplication} from "@/apis/appLC/applc";
import PluginsDailog from './comp/PluginsDailog'

export default {
  components: {PluginsDailog},
  data () {
    return {
      // 基本信息表单
      basicForm: {
        appName: "",
        appVersion: "",
        appIndb: "",
        appDBName: "",
        isMonitor: "",
        isSwitch: "",
        appRemarks: "",
        remarks: "",
        resourceId: "",
        appScene: "",
        appType: "",
        pluginsId: '',
        pluginsName: ''
      },
      //基本信息验证
      basicRules: {},
      //资源外键
      resourceOptions: [],
      appId: ""
    };
  },
  created () {
    this.getResource();
  },
  mounted () {
  },
  methods: {
    //录入基本信息组件
    getFile (val) {
      let data = new FormData();
      data.append("file", val.file);
    },
    //获取上传文件信息
    success (res, file) {
      this.environmentForm.requirePath = res.data;
    },
    // 获取资源列表
    getResource () {
      get_getResource().then((res) => {
        this.resourceOptions = res.data.data;
      });
    },
    showPluginsDailog () {
      this.$refs.pluginsDailog.show()
    },
    checkedPlugin (item) {
      this.basicForm.pluginsId = item.id
      this.basicForm.pluginsName = `${item.pluginsName} (${item.pluginsVesion})`
    },
    // 录入应用
    appAdd () {
      put_AApplication(this.basicForm).then((res) => {
        let {data, msg} = res.data;
        this.appId = data;
        sessionStorage.setItem("isApp", this.appId);
        this.$confirm("是否录入应用附属信息?", "应用新增成功", {
          confirmButtonText: "录入附属信息",
          cancelButtonText: "取消",
          type: "success",
        }).then(() => {
          this.$router.push({
            name: "AppBasic",
            query: {appid: data},
          });
        }).catch(() => {
          this.$router.push({
            name: "AppArrange",
            query: {add: 'add', appid: data},
          });
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .scrollbar-box {
    padding: 15px;
  }

  .comp-item-group {
    .comp-item-box {
      margin-bottom: 15px;

      .comp-item-title {
        height: 40px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(3, 68, 108, 0.8);
        font-size: 17px;
        font-weight: bold;
      }

      .comp-item-cont {
        padding: 15px;
        border: solid 1px rgba(3, 68, 108, 0.5);
      }
    }

    .comp-item-btn-group {
      text-align: center;
      margin-top: 15px;
    }

    /deep/ .el-input-group__append {
      background-color: #66b1ff;
      border-color: #66b1ff;
      color: #ffffff;
    }
  }

  .basic-info {
    height: 100%;
    width: 100%;

    .basic-body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  }
</style>
